<%@page import="com.winexpress.product.Wine"%>
<%@page import="java.util.List"%>
<%@page import="com.winexpress.product.Category"%>
<%@page import="java.util.ArrayList"%>
<%@page import="com.winexpress.util.SessionAttributes"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@taglib prefix="t" tagdir="/WEB-INF/tags" %>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="/WineXpressClient/resources/js/bootstrap.min.js"></script>
        <title>wineXpress Wine Shop</title>
        <style type="text/css">
            .pg-normal { 
                color: #2E2E2E; 
                font-size: 18px; 
                cursor: pointer; 
                background: #E6E6E6; 
                padding: 2px 4px 2px 4px; 
            }

            .pg-selected { 
                color: #2E2E2E; 
                font-size: 20px; 
                background: #0080FF; 
                padding: 2px 4px 2px 4px; 
            }</style>
        <script type="text/javascript">
            function Pager(tableName, itemsPerPage) {
                this.tableName = tableName;
                this.itemsPerPage = itemsPerPage;
                this.currentPage = 1;
                this.pages = 0;
                this.inited = false;
                this.showRecords = function(from, to) {
                    var rows = document.getElementById(tableName).rows;
                    for (var i = 1; i < rows.length; i++) {
                        if (i < from || i > to)
                            rows[i].style.display = 'none';
                        else
                            rows[i].style.display = '';
                    }
                }
                this.showPage = function(pageNumber) {
                    if (!this.inited) {
                        alert("not inited");
                        return;
                    }
                    var oldPageAnchor = document.getElementById('pg' + this.currentPage);
                    oldPageAnchor.className = 'pg-normal';
                    this.currentPage = pageNumber;
                    var newPageAnchor = document.getElementById('pg' + this.currentPage);
                    newPageAnchor.className = 'pg-selected';
                    var from = (pageNumber - 1) * itemsPerPage + 1;
                    var to = from + itemsPerPage - 1;
                    this.showRecords(from, to);
                }

                this.prev = function() {
                    if (this.currentPage > 1)
                        this.showPage(this.currentPage - 1);
                }

                this.next = function() {
                    if (this.currentPage < this.pages) {
                        this.showPage(this.currentPage + 1);
                    }

                }
                this.init = function() {
                    var rows = document.getElementById(tableName).rows;
                    var records = (rows.length - 1);
                    this.pages = Math.ceil(records / itemsPerPage);
                    this.inited = true;
                }

                this.showPageNav = function(pagerName, positionId) {
                    if (!this.inited) {
                        alert("not inited");
                        return;
                    }

                    var element = document.getElementById(positionId);
                    var pagerHtml = '<span onclick="' + pagerName + '.prev();" class="pg-normal"> « Prev &nbsp;</span> ';
                    for (var page = 1; page <= this.pages; page++)
                        pagerHtml += '<span id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' + page + '</span> ';
                    pagerHtml += '<span onclick="' + pagerName + '.next();" class="pg-normal"> Next »</span>';
                    element.innerHTML = pagerHtml;
                }
            }</script>
    </head>
    <body>
        <t:customerNavigation/>
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Shop</h1>
                    <ol class="breadcrumb">
                        <li><a href="/WineXpressClient/index.jsp">Home</a></li>
                        <li class="active">Shop</li>
                    </ol>
                </div>
            </div>
            <!--End of row-->

            <div class="row" style="width:100%">
                <div style="width:100%">
                    <form id="search" action="/WineXpressClient/searchManagement/shop" method="post">
                        <div style="width: 45%" class="col-lg-6">
                            <select class="form-control" name="seach">
                                <option value="searchByWineName">Wine name</option>
                                <option value="searcyByCategory">Category</option>
                                <option value="searchByCountry">Country</option>
                                <option value="searchByRegion">Region</option>
                                <option value="searchByVarietal">Varietal</option>
                                <option value="searchByVintage">Vintage</option>
                            </select>
                        </div>
                        <div style="float: left; width: 45%; padding-left: 10px; padding-right: 10px;" class="col-lg-6">
                            <input type="text" class="form-control" name="key" placeholder="Enter keywords">
                        </div>
                        <button type="submit" class="btn btn-default" style="width: 10%;">Search</button>
                    </form>
                </div>
            </div>
            <!--End of row-->
            <br>
            <%List<String> category = (List) session.getAttribute("category");%>
            <%List<String> country = (List) session.getAttribute("country");%>
            <%List<String> region = (List) session.getAttribute("region");%>
            <%List<String> varietal = (List) session.getAttribute("varietal");%>
            <%List<String> vintage = (List) session.getAttribute("vintage");%>
            <div class="row">
                <div class="col-lg-2">

                    <div class="well">
                        <h5><b>Shop by Category</b></h5>
                        <ul id="category_short" style="list-style: none; padding-left: 0px;">
                            <%for (int i = 0; i < 3; i++) {%>
                            <li><a href="/WineXpressClient/searchManagement/shop?seach=searcyByCategory&key=<%=category.get(i)%>"><%out.print(category.get(i));%></a></li>
                                <%}%>
                            <a class='lnav_link'  href="#" onclick="$('#category_long').slideDown();
                                    $('#category_short').slideUp();
                                    return false;">Show More</a>
                        </ul>
                        <ul id="category_long" style="display:none; list-style: none; padding-left: 0px;">
                            <%for (int i = 0; i < category.size(); i++) {%>
                            <li><a href="/WineXpressClient/searchManagement/shop?seach=searcyByCategory&key=<%=category.get(i)%>"><%out.print(category.get(i));%></a></li>
                                <%}%>
                            <a class='lnav_link'  href="#" onclick="$('#category_long').slideUp();
                                    $('#category_short').slideDown();
                                    return false;">Show Less</a>
                        </ul>
                    </div>
                    <div class="well">
                        <h5><b>Shop by Country</b></h5>
                        <ul id="country_short" style="list-style: none; padding-left: 0px;">
                            <%for (int i = 0; i < 3; i++) {%>
                            <li><a href="/WineXpressClient/searchManagement/shop?seach=searchByCountry&key=<%=country.get(i)%>"><%out.print(country.get(i));%></a></li>
                                <%}%>
                            <a class='lnav_link'  href="#" onclick="$('#country_long').slideDown();
                                    $('#country_short').slideUp();
                                    return false;">Show More</a>
                        </ul>
                        <ul id="country_long" style="display:none; list-style: none; padding-left: 0px;">
                            <%for (int i = 0; i < country.size(); i++) {%>
                            <li><a href="/WineXpressClient/searchManagement/shop?seach=searchByCountry&key=<%=country.get(i)%>"><%out.print(country.get(i));%></a></li>
                                <%}%>
                            <a class='lnav_link'  href="#" onclick="$('#country_long').slideUp();
                                    $('#country_short').slideDown();
                                    return false;">Show Less</a>
                        </ul>
                    </div>
                    <div class="well">
                        <h5><b>Shop by Region</b></h5>
                        <ul id="region_short" style="list-style: none; padding-left: 0px;">
                            <%for (int i = 0; i < 3; i++) {%>
                            <li><a href="/WineXpressClient/searchManagement/shop?seach=searchByRegion&key=<%=region.get(i)%>"><%out.print(region.get(i));%></a></li>
                                <%}%>
                            <a class='lnav_link'  href="#" style="" onclick="$('#region_long').slideDown();
                                    $('#region_short').slideUp();
                                    return false;">Show More</a>
                        </ul>
                        <ul id="region_long" style="display:none; list-style: none; padding-left: 0px;">
                            <%for (int i = 0; i < region.size(); i++) {%>
                            <li><a href="/WineXpressClient/searchManagement/shop?seach=searchByRegion&key=<%=region.get(i)%>"><%out.print(region.get(i));%></a></li>
                                <%}%>
                            <a class='lnav_link'  href="#" onclick="$('#region_long').slideUp();
                                    $('#region_short').slideDown();
                                    return false;">Show Less</a>
                        </ul>
                    </div>
                    <div class="well">
                        <h5><b>Shop by Varietal</b></h5>
                        <ul id="varietal_short" style="list-style: none; padding-left: 0px;">
                            <%for (int i = 0; i < 3; i++) {%>
                            <li><a href="/WineXpressClient/searchManagement/shop?seach=searchByVarietal&key=<%=varietal.get(i)%>"><%out.print(varietal.get(i));%></a></li>
                                <%}%>
                            <a class='lnav_link'  href="#" onclick="$('#varietal_long').slideDown();
                                    $('#varietal_short').slideUp();
                                    return false;">Show More</a>
                        </ul>
                        <ul id="varietal_long" style="display:none; list-style: none; padding-left: 0px;">
                            <%for (int i = 0; i < varietal.size(); i++) {%>
                            <li><a href="/WineXpressClient/searchManagement/shop?seach=searchByVarietal&key=<%=varietal.get(i)%>"><%out.print(varietal.get(i));%></a></li>
                                <%}%>
                            <a class='lnav_link'  href="#" onclick="$('#varietal_long').slideUp();
                                    $('#varietal_short').slideDown();
                                    return false;">Show Less</a>
                        </ul>
                    </div>
                    <div class="well">
                        <h5><b>Shop by Vintage</b></h5>
                        <ul id="vintage_short" style="list-style: none; padding-left: 0px;">
                            <%for (int i = 0; i < 3; i++) {%>
                            <li><a href="/WineXpressClient/searchManagement/shop?seach=searchByVintage&key=<%=vintage.get(i)%>"><%out.print(vintage.get(i));%></a></li>
                                <%}%>
                            <a class='lnav_link'  href="#" onclick="$('#vintage_long').slideDown();
                                    $('#vintage_short').slideUp();
                                    return false;">Show More</a>
                        </ul>
                        <ul id="vintage_long" style="display:none; list-style: none; padding-left: 0px;">
                            <%for (int i = 0; i < vintage.size(); i++) {%>
                            <li><a href="/WineXpressClient/searchManagement/shop?seach=searchByVintage&key=<%=vintage.get(i)%>"><%out.print(vintage.get(i));%></a></li>
                                <%}%>
                            <a class='lnav_link'  href="#" onclick="$('#vintage_long').slideUp();
                                    $('#vintage_short').slideDown();
                                    return false;">Show Less</a>
                        </ul>
                    </div>
                </div>
                <!--End of left-side bar--> 
                <div class="col-lg-10">
                    <table class="table table-striped table-bordered" style="text-align: center;" id="tablepaging">
                        <thead>
                            <tr class="active">
                                <th>&nbsp;&nbsp;</th>
                                <th style="text-align: center;"><b>Name</b></th>
                                <th style="text-align: center;"><b>Country</b></th>
                                <th style="text-align: center;"><b>Producer</b></th>
                                <th style="text-align: center;"><b>Vintage</b></th>
                                <th style="text-align: center;"><b>Volume</b></th>
                                <th style="text-align: center;"><b>Price</b></th>
                            </tr>
                        </thead>
                        <tbody>
                            <%  List<Wine> list = (List) session.getAttribute("wineList");%>
                            <% if (!list.isEmpty()) {
                                    for (Object o : list) {
                                        Wine w = (Wine) o;%>
                            <tr style="height: 10%">
                                <td style="width: 15%; height: 180px;"> <img src="<%=w.getImageUrl()%>" style="height: 100%; margin: auto; alignment-adjust: central"></td>
                                <td style="width: 18%; vertical-align: middle;"> <a href="/WineXpressClient/products/productDetail?id=<%=w.getId()%>"> <%=w.getName()%> </a></td>
                                <td style="width: 10%; vertical-align: middle;"> <%=w.getCountry()%></td>
                                <td style="width: 18%; vertical-align: middle;"> <%=w.getProducer()%> </td>
                                <td style="width: 10%; vertical-align: middle;"> <%=w.getVintage()%> </td>
                                <td style="width: 10%; vertical-align: middle;"> <%=w.getVolume()%> ml </td>

                                <td style="vertical-align: middle; text-align: center;">
                                    <% double discount = w.getDiscount(); %>
                                    <% double discountedPrice = (100 - w.getDiscount()) * w.getPrice() / 100;%>
                                    <%
                                        if (discount == 0)
                                            out.print("S$" + w.getPrice());
                                        else {
                                    %>
                                    <del>S$<% out.print(w.getPrice());%></del> &nbsp;<b style="color: red;">S$<%out.print(discountedPrice);%></b>
                                    <%}%>
                                </td>
                            </tr>   
                            <%}
                            } else {%>
                            <tr>
                        <div class="alert alert-warning"style="width: 100%; margin-left: 10%; margin-right: 10%" >
                            Sorry, there are no such wines.<br> 
                            Please contact us by enquiries if you need further help.
                        </div>             
                        </tr>
                        <%}%>
                        </tbody>
                    </table>
                    <div id="pageNavPosition" style="padding-top: 20px" align="center"></div>
                    <script type="text/javascript">
                        var pager = new Pager('tablepaging', 5);
                        pager.init();
                        pager.showPageNav('pager', 'pageNavPosition');
                        pager.showPage(1);
                    </script>
                </div>
                <!--End of right-side bar-->
            </div>
            <!--End of row-->
        </div>
        <!--End of container-->
        <t:footer/>
    </body>
</html>
